import React, { Component } from "react";
import Header from "../../components/Header/Header";
 import {$pre} from "../../http/http"

import { reqgetgoods ,reqgetcate} from "../../http/api";

import "./cate.less";

export default class Cate extends Component {
  constructor() {
    super();
    this.state = {
      cate: [],
      n: 0,
      godds: [],
      id:null
    };
  }
  async componentDidMount() {
    reqgetcate().then((res) => {
      this.setState({
        cate: res.data.list,
      });
    });
   
    this.handleClick(0,1)
  }
  async handleClick(index, id) {
    this.setState({
      n: index,
    })
    let res = await reqgetgoods({ fid: id});
    if (res.data.code == 200) {
      this.setState({
        godds: res.data.list,
       
      });
    }
  }
  render() {
    let { cate, n, godds } = this.state;
    return (
      <div>
        <Header title="分类"></Header>
        <div id="header">
          <div className="left">
            <ul>
              <li>本周特惠</li>
              {cate.map((item, index) => {
                return (
                  <li
                    key={item.id}
                    onClick={() => this.handleClick(index, item.id)}
                    className={n == index ? "active" : null}
                  >
                    {" "}
                    {item.catename}
                  </li>
                );
              })}
            </ul>
          </div>
          <div className="right">
            {godds.map((item) => {
              return (
                <div className="flse"    key={item.id} onClick={()=>{
                  this.props.history.push("/detail/"+item.id)
                }}>
                  {" "}
                  <div className="navbanner">
                    <img src={$pre+item.img} alt={item.goodsname} />
                  </div>
                  <div className="navright">
                    <p>{item.goodsname}</p>
                    <p>{item.price}</p>
                    <p>{item.market_price}</p>
                    <p>{item.id}人已付款</p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}
